<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<script src="plugin/jq1.10.2.js"></script>
	<script src="plugin/levelRuler.js"></script>
	<link rel="stylesheet" href="css/demo.css" />
	<link rel="stylesheet" href="css/levelRuler.css" />
	<title>尺子</title>
</head>

<body>

	<h2>尺子1</h2>
	<div class="lrWrap" id="lr1">
		<div class="lv-line">
			<div class="lv-line-c"></div>
			<div class="ruler"></div>
		</div>
	</div>
	<h2>尺子2</h2>
	<div class="lrWrap" id="lr2">
		<div class="lv-line">
			<div class="lv-line-c"></div>
			<div class="ruler"></div>
		</div>
	</div>
	<h2>尺子3</h2>
	<div class="lrWrap" id="lr3">
		<div class="lv-line">
			<div class="lv-line-c"></div>
			<div class="ruler"></div>
		</div>
	</div>
	<h2>尺子4</h2>
	<div class="lrWrap" id="lr4">
		<div class="lv-line">
			<div class="lv-line-c"></div>
			<div class="ruler"></div>
		</div>
	</div>
<script>
	function initCho(){
		$("#lr1").levelRuler({rate:2})
		$("#lr2").levelRuler({rate:13});
		$("#lr3").levelRuler({
			quantity: 12,
			unit_q: 3,
			rate:9,
			unit_t: ["小","中","大","特"]
		});
		$("#lr4").levelRuler({
			rate:19,
			unit_q: 5,
			unit_t: [0,1,2,3,4,5]
		})
	}
	$(function(){
		initCho()
	})
	$(window).resize(function(){
		initCho()
	
	})
	
	</script>
</body>

</html>
